<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
	<script src="bootstrap-4.6.2-dist/js/jquery-3.5.1.slim.min.js"></script>
	<script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
		<a class="navbar-brand" href="#"><img src="./images/tubiao.png" class="shouye"></a>
		<button class="navbar-toggler" type="button" data-toggle = "collapse" data-target = "#navtop">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navtop">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item">
					<a class="nav-link" href="index.html">发现音乐</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="bofangqi.html">我的音乐</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">关注</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">商城</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">音乐人</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="yh.html">烟花</a>
				</li>
            </ul>
            <form  class=" form-inline my-2 mr-lg-0">
				<input class=" form-control mr-sm-0" type="diannao" placeholder="音乐/视频/用户"/>
				<button class="btn mr-3 bg-secondary" type="submit">搜索</button>
			</form>
			<a class="denglu mr-4" href="./denglu.html" id="name">登录/注册</a>
			<span id="time" class="red"></span>
		</div>
	</nav>
	<div class="recommend" id="id-top">
        <div class="container">
            <div class="recommend-box">
                <ul id="dhl">
                    <li id="xx"><a href="index.html">推荐</a></li>
                    <li id="xx"><a href="paihangbang.html">排行榜</a></li>
                    <li id="xx"><a href="gedan.html">歌单</a></li>
                    <li id="xx"><a href="#">主播电台</a></li>
                    <li id="xx"><a href="geshou.html">歌手</a></li>
                    <li id="xx"><a href="#">新碟上架</a></li>
                </ul>
            </div>
        </div>
    </div>
	<div class=" container">
		<img src="./images/lunbo1.jpg" id="pic" class="w-100 d-block tupian" />
	</div>
	<div class=" middiv">
		<div class="remen">
			<p class="title">
				<img src="./images/ziti.png" style="width: 90px;"/>
				<span class="t-span">
					我喜欢
				</span>
				<span class="con_gengduo">
					<a href="javascript:;">更多>></a>
				</span>
			</p>
			<table>
				<thead>
					<tr>
						<th>歌名</th>
						<th>歌手</th>
						<th>类型</th>
						<th>专辑</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	<div class=" container">
		<h3>&nbsp;热门推荐&nbsp;&nbsp;&nbsp;华语&nbsp|&nbsp;&nbsp;流行&nbsp|&nbsp;&nbsp;摇滚&nbsp|&nbsp;&nbsp;民谣&nbsp|&nbsp;&nbsp;电子</h1>
		<table class="con">
			<tr >
				<td width="20"><img src="./images/yingyue1.jpg" alt="图片" title="2022全网超好听热门流行歌曲（持续更新）"></td>
				<td width="20"><img src="./images/yingyue2.jpg" alt="图片" title="MODA NAHXA 新歌播放正在喜欢听中…"></td>
				<td width="20"><img src="./images/yingyue3.jpg" alt="图片" title="可生活不是电影，没有那么多兜兜转转"> </td>
				<td width="20"><img src="./images/yingyue4.jpg" alt="图片" title="【人间剧场】最感动 | 67 岁流浪老人徒步还乡，司机：走反了"></td>
			
			</tr>
			<tr>
				<td>2022全网超好听热门流行歌曲（持续更新）</td>
				<td>MODA NAHXA 新歌播放正在喜欢听中…</td>
				<td>可生活不是电影，没有那么多兜兜转转</td>
				<td>【人间剧场】最感动 | 67 岁流浪老人徒步还乡，司机：走反了</td>
			</tr>
			<br/>
			<tr >
				<td width="20"><img src="./images/yingyue5.jpg"  alt="图片" title="「心动系情歌」想和你贴贴，是我的小心思"></td>
				<td width="20"><img src="./images/yingyue6.jpg"  alt="图片" title="兼职无常后我红了 第1集"></td>
				<td width="20"><img src="./images/yingyue7.jpg"  alt="图片" title="誓言-求佛（DJ小可 remix《建议随机播放》"> </td>
				<td width="20"><img src="./images/yingyue8.jpg"  alt="图片" title="「假小子（新"></td>
			
			</tr>
			<tr>
				<td>「心动系情歌」想和你贴贴，是我的小心思</td>
				<td>兼职无常后我红了 第1集</td>
				<td>誓言-求佛（DJ小可 remix《建议随机播放》</td>
				<td>「假小子（新）」</td>
			</tr>
		</table>
	</div>
	<footer class=" container">
		<ul class="list-unstyled row" >
			<li id="weibu">
				<img src="./images/d1.jpg" alt="" class=" wb">
				<p>音乐交流平台</p>
			</li>
			<li id="weibu">
				<img src="./images/d2.jpg" alt="" class=" wb">
				<p>音乐交易所</p>
			</li >
			<li id="weibu">
				<img src="./images/d3.jpg" alt="" class=" wb">
				<p>X StudioAI歌手</p>
			</li>
			<li id="weibu">
				<img src="./images/d4.jpg" alt="" class=" wb">
				<p>用户认证</p>
			</li>
		</ul>
	</footer>
	<footer class="bg-dark text-center mt-5">
		<p class="ziti">(c) Copyright 2024 Administrator. All Rights Reserved. </p>
		<p class="ziti"><span class="text-danger">32302140327 李定威</span> 版权所有</p>
	</footer>
    <script>
		document.getElementById("name").innerHTML = `${localStorage.getItem("name")}`;
		var data = new Date();
		var year = data.getFullYear();
		var month = data.getMonth()+1;
		var day = data.getDate();
		document.getElementById("time").innerHTML = year+"年"+month+"月"+day+"日";
		var time,index = 0;
		var acc = ["./images/lunbo1.jpg","./images/lunbo2.jpg","./images/lunbo3.jpg","./images/lunbo4.jpg"]
		function shoupic(){
			document.getElementById("pic").src = acc[index%4];
			index++;
			clearTimeout(time);
			time = setTimeout("shoupic()",2000);
		}
		window.onload=shoupic;
		var dhl = document.querySelectorAll("#dhl li");
		dhl.forEach(item=>{
			item.onmouseenter=function(){
				dhl.forEach(i=>i.classList.remove("recommend-color"));
				item.classList.add("recommend-color");
			}
		})
		var dh = document.querySelectorAll("#weibu img");
		dh.forEach(item=>{
			item.onmouseenter=function(){
				dh.forEach(i=>i.style.width=100+"px");
				item.style.width=120+"px";
			}
		})
		var datas = [{
					song: "她说",
					type: "流行",
					Album: "1",
					singer: "林俊杰"
				}, {
					song: "龙卷风",
					type: "流行",
					Album: "1",
					singer: "周杰伦"
				}, {
					song: "花海",
					type: "流行",
					Album: "1",
					singer: "周杰伦"
				}, {
					song: "小宇",
					type: "流行",
					Album: "1",
					singer: "蓝心宇"
				}, {
					song: "雪下的时候",
					type: "流行",
					Album: "1",
					singer: "乔佳旭"
				}, {
					song: "My Heart Will Go On",
					type: "流行",
					Album: "1",
					singer: "满舒克"
				}];
				//2,往tbody里面创建行，有几个人（通过数组的长度）我们就创建几行
				var tbody = document.querySelector("tbody");
				for (var i = 0; i < datas.length; i++) //外面的for循环 是 行tr
				{
					var tr = document.createElement("tr");
					tbody.appendChild(tr);
					//3,往tr每一行里面创建单元格（跟数据有关系的3个单元格），td单元格的数量取决于每个对象的属性个数 for循环遍历对象 datas[i]
					for (var k in datas[i]) //里面的for循环是 列
					{
						var td = document.createElement("td"); //创建单元格
						tr.appendChild(td);
						td.innerHTML = datas[i][k]; //把对象里面的属性值 datas[i][k]给td
					}
					//4，创建有删除二字的单元格
					var td = document.createElement("td");
					tr.appendChild(td);
					td.innerHTML = "<a href='javascript:;' class='aa' >删除</a>";
				}

				//5,删除操作
				var as = document.getElementsByClassName("aa");
				for (var i = 0; i < as.length; i++) {
					as[i].onclick = function() { //点击a 删除 当前a 所在的行（a链接的爸爸的爸爸）
						tbody.removeChild(this.parentNode.parentNode);
					}
				}
	</script>
	
</body>
</html>